<template>
	<view class="deletion-page">
		<!-- 页面头部 -->
		<!-- #ifdef APP-PLUS -->
		<view class="page-header">
			<view class="header-left" @click="goBack">
				<u-icon name="arrow-left" color="#333333" size="42"></u-icon>
			</view>
			<view class="header-title">账户注销</view>
			<view class="header-right"></view>
		</view>
		<!-- #endif -->
		
		<!-- 主要内容区域 -->
		<view class="content-area">
			<!-- 警告图标 -->
			<view class="warning-icon">
				<u-icon name="warning" color="#FF6B6B" size="120"></u-icon>
			</view>
			
			<!-- 标题 -->
			<view class="title">账户注销确认</view>
			
			<!-- 警告提示 -->
			<view class="warning-box">
				<view class="warning-title">⚠️ 重要提醒</view>
				<view class="warning-content">
					账户注销后将无法恢复，请谨慎操作！
				</view>
			</view>
			
			<!-- 数据清除说明 -->
			<view class="data-clear-section">
				<view class="section-title">数据清除说明</view>
				<view class="clear-list">
					<view class="clear-item">
						<u-icon name="close" color="#FF6B6B" size="24"></u-icon>
						<text class="clear-text">个人资料信息</text>
					</view>
					<view class="clear-item">
						<u-icon name="close" color="#FF6B6B" size="24"></u-icon>
						<text class="clear-text">订单记录</text>
					</view>
					<view class="clear-item">
						<u-icon name="close" color="#FF6B6B" size="24"></u-icon>
						<text class="clear-text">收藏和浏览记录</text>
					</view>
					<view class="clear-item">
						<u-icon name="close" color="#FF6B6B" size="24"></u-icon>
						<text class="clear-text">账户余额和积分</text>
					</view>
					<view class="clear-item">
						<u-icon name="close" color="#FF6B6B" size="24"></u-icon>
						<text class="clear-text">聊天记录</text>
					</view>
				</view>
			</view>
			
			<!-- 无法找回提示 -->
			<view class="irreversible-notice">
				<view class="notice-icon">🚫</view>
				<view class="notice-content">
					<text class="notice-title">数据无法找回</text>
					<text class="notice-desc">注销后所有数据将被永久删除，无法恢复</text>
				</view>
			</view>
		</view>
		
		<!-- 底部按钮 -->
		<view class="bottom-buttons">
			<button class="retain-btn" @click="retainAccount">保留账户</button>
			<button class="delete-btn" @click="confirmDeletion">确认注销</button>
		</view>
		
		<!-- 确认注销弹窗 -->
		<u-popup v-model="showConfirmPopup" mode="center" border-radius="20">
			<view class="confirm-popup">
				<view class="popup-title">最终确认</view>
				<view class="popup-content">
					确定要注销账户吗？此操作不可撤销！
				</view>
				<view class="popup-buttons">
					<button class="popup-cancel" @click="showConfirmPopup = false">取消</button>
					<button class="popup-confirm" @click="executeDeletion">确认注销</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showConfirmPopup: false
			}
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			
			// 保留账户
			retainAccount() {
				uni.navigateBack();
			},
			
			// 确认注销
			confirmDeletion() {
				this.showConfirmPopup = true;
			},
			
			// 执行注销
			async executeDeletion() {
				try {
					this.showConfirmPopup = false;
					this.$hint.showLoading('正在注销账户...');
					
					// 调用注销接口
					const res = await this.$service({
						url: '/api/member.user/deleteAccount',
						method: 'POST'
					});
					
					this.$hint.hideLoading();
					
					if (res.code === 1) {
						this.$hint.desc('账户注销成功');
						
						// 清除本地数据
						this.$store.commit('logout');
						
						// 跳转到登录页面
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/login/index'
							});
						}, 1500);
					} else {
						this.$hint.desc(res.msg || '注销失败，请重试');
					}
				} catch (error) {
					this.$hint.hideLoading();
					console.error('账户注销失败:', error);
					this.$hint.desc('注销失败，请重试');
				}
			}
		}
	}
</script>

<style scoped>
	.deletion-page {
		min-height: 100vh;
		background-color: #ffffff;
		position: relative;
	}
	
	/* 页面头部 */
	.page-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
		background-color: #ffffff;
	}
	
	.header-left, .header-right {
		width: 80rpx;
		display: flex;
		align-items: center;
	}
	
	.header-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
	}
	
	/* 主要内容区域 */
	.content-area {
		padding: 60rpx 40rpx;
		flex: 1;
	}
	
	/* 警告图标 */
	.warning-icon {
		text-align: center;
		margin-bottom: 40rpx;
	}
	
	/* 标题 */
	.title {
		font-size: 48rpx;
		font-weight: bold;
		color: #333333;
		text-align: center;
		margin-bottom: 60rpx;
	}
	
	/* 警告提示框 */
	.warning-box {
		background: linear-gradient(135deg, #FFF5F5 0%, #FFE8E8 100%);
		border: 2rpx solid #FF6B6B;
		border-radius: 20rpx;
		padding: 40rpx;
		margin-bottom: 60rpx;
	}
	
	.warning-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #FF6B6B;
		margin-bottom: 20rpx;
	}
	
	.warning-content {
		font-size: 28rpx;
		color: #FF6B6B;
		line-height: 1.6;
	}
	
	/* 数据清除说明 */
	.data-clear-section {
		margin-bottom: 60rpx;
	}
	
	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 30rpx;
	}
	
	.clear-list {
		background-color: #f8f9fa;
		border-radius: 16rpx;
		padding: 30rpx;
	}
	
	.clear-item {
		display: flex;
		align-items: center;
		margin-bottom: 25rpx;
	}
	
	.clear-item:last-child {
		margin-bottom: 0;
	}
	
	.clear-text {
		font-size: 28rpx;
		color: #666666;
		margin-left: 20rpx;
	}
	
	/* 无法找回提示 */
	.irreversible-notice {
		display: flex;
		align-items: flex-start;
		background-color: #FFF8F0;
		border: 2rpx solid #FFA500;
		border-radius: 16rpx;
		padding: 30rpx;
	}
	
	.notice-icon {
		font-size: 40rpx;
		margin-right: 20rpx;
		margin-top: 5rpx;
	}
	
	.notice-content {
		flex: 1;
	}
	
	.notice-title {
		display: block;
		font-size: 30rpx;
		font-weight: bold;
		color: #FFA500;
		margin-bottom: 10rpx;
	}
	
	.notice-desc {
		font-size: 26rpx;
		color: #FFA500;
		line-height: 1.5;
	}
	
	/* 底部按钮 */
	.bottom-buttons {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 30rpx 40rpx 60rpx 40rpx;
		background-color: #ffffff;
		border-top: 1rpx solid #f0f0f0;
		display: flex;
		gap: 20rpx;
	}
	
	.retain-btn, .delete-btn {
		flex: 1;
		height: 88rpx;
		border-radius: 44rpx;
		font-size: 32rpx;
		font-weight: bold;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.retain-btn {
		background-color: #f8f9fa;
		color: #666666;
		border: 2rpx solid #e9ecef;
	}
	
	.delete-btn {
		background: linear-gradient(135deg, #FF6B6B 0%, #FF5252 100%);
		color: #ffffff;
		box-shadow: 0 4rpx 20rpx rgba(255, 107, 107, 0.3);
	}
	
	.retain-btn:active {
		background-color: #e9ecef;
	}
	
	.delete-btn:active {
		transform: scale(0.98);
	}
	
	/* 确认弹窗 */
	.confirm-popup {
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 60rpx 40rpx;
		width: 600rpx;
	}
	
	.popup-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
		text-align: center;
		margin-bottom: 30rpx;
	}
	
	.popup-content {
		font-size: 28rpx;
		color: #666666;
		text-align: center;
		line-height: 1.6;
		margin-bottom: 50rpx;
	}
	
	.popup-buttons {
		display: flex;
		gap: 20rpx;
	}
	
	.popup-cancel, .popup-confirm {
		flex: 1;
		height: 80rpx;
		border-radius: 40rpx;
		font-size: 30rpx;
		font-weight: bold;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.popup-cancel {
		background-color: #f8f9fa;
		color: #666666;
		border: 2rpx solid #e9ecef;
	}
	
	.popup-confirm {
		background: linear-gradient(135deg, #FF6B6B 0%, #FF5252 100%);
		color: #ffffff;
	}
</style> 